<template>
	<view class="address-box">
		<view class="addreeList">
			<view class="concern" v-if="xinxi"  v-for="(item,i) in list" :key="i">
				<view class="user">
					<text class="defaultl" v-if="item.defaultStatus">默认</text>
					<text>{{item.recipientName}} {{item.phoneNumber}}</text>
				</view>
				<view class="addree">
					<text>{{item.state}}{{item.city}}{{item.districtOrCounty}}
					{{item.addressLine}}
					</text>
						<u-icon name="edit-pen" size="60rpx" @click="UpdateAddree"></u-icon>
				</view>
			</view>
			<view class="addreeB" v-if="tupian">
			</view>
		</view> 
		<u-button text="添加新地址" shape="circle" color="#f72647" class="addree-btn" @click="insertAddree"></u-button>
	</view>

</template>


<script>
export default {
	data() {
		return {
			
			tupian: true,
			xinxi: false,
			userId: uni.getStorageSync('id'),
			list: []
		}
	},
	onLoad() {
		this.request("/addresses/getaddresses", "get", { userId: this.userId }).then((res) => {
			console.log(res);
			this.list = res.data.result;
			console.log(this.list);
			this.xianshi(); // 调用xianshi方法
		}).catch((err) => {
			console.error(err);
		});
	},
	methods: {
		UpdateAddree() {
			uni.navigateTo({
				url: "/pages/addreeList/updateaddree",
				params: null,
			});
		},
		insertAddree() {
			uni.navigateTo({
				url: "/pages/addreeList/newaddree"
			});
		},
		xianshi() {
			if (this.list != null) {
				this.xinxi = true;
				this.tupian = false;
			}
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i].defaultStatus === 1) {
					this.list[i].defaultStatus= true;
				}else{
					this.list[i].defaultStatus= false;
				}
			}
		}
	}
}
</script>



<style scoped>
	.address-box{
		display: flex;
	}
	.addreeList {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.concern {
		margin-top: 50rpx;
		width: 90%;
		display: flex;
		flex-direction: column;
		padding: 6rpx;
	}
	.user{
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
	}
	.defaultl{
		width: 80rpx;
		background-color: #f72647;
		color:white;
		border-radius: 16rpx;
		text-align: center;
	}
	.addree{
		display: flex;
		padding: 10rpx;
		    justify-content: space-between;
	}
	.addree-btn{
		position: fixed;
		bottom: 0;
	}
	.addreeB{
		width: 100%;
		height: 1500rpx;
		background: url('../../static/img/address.jpg') center/cover no-repeat;
	}
	
	
</style>